<template>
  <div class="withdrawal">
    <div class="topbox">
      <div class="withtop">
        <p class="way">
          <span class="first">到帐方式</span>
          <span class="second">微信零钱</span>
        </p>
        <p class="money">{{types == 'BJ' ? task.task_bjmoney : task.task_yjmoney}}</p>
      </div>
    </div>
    <div class="centerbox">
      <p>提现金额</p>
      <div class="content">
        <div class="textmoney">
          <span class="first">￥</span>
          <input v-model="moneyval" :disabled="disabled" type="number" placeholder="请输入提现金额...">
        </div>
        <span class="all" @click="onAll">全部提现</span>
      </div>
      <p class="now" v-if="this.types == 'BJ'">当前可提现本金 <span style="color:#428efc;">{{task.task_bjmoney}}</span> 元</p>
      <p class="now" v-else>当前可提现佣金 <span style="color:#428efc;">{{task.task_yjmoney}}</span> 元
      </p>
      <p style="font-size:18px;color:red">支付宝提现实名必须和身份证上的名字一致</p>
      <p style="font-size:18px;color:red">微信提现实名必须和身份证上的名字一致</p>
      <p style="font-size:18px;color:red">否则无法提现</p>
<!--      <p style="font-size:20px;color:red">所以选择大金额联系QQ客服返款</p>-->
      <div class="btnlist">
        <div class="surebtn another" @click="onAuth">授权</div>
        <div class="surebtn" @click="onSure">确认</div>
      </div>
      <div
        style="color:red;font-size:25px;display:flex;flex-direction:column;justify-content: center;align-items: center;margin-top:20px;">
        <span>第一次提现请在微信打开只点一次授权以后重新进去即可确认提现</span>
      </div>
      <van-dialog v-model="isshow" title="密码验证" show-cancel-button @confirm="onConfirm" @cancel="isshow = false">
        <van-field v-model="userpassword" center clearable label="操作密码" placeholder="请输入操作密码..."/>
      </van-dialog>
    </div>
  </div>
</template>

<script>
  import {capitalwithdraw, authorizedaddress, businesspayment} from '../api/api'
  import aestool from '@/utils/aestool.js'
  export default {
    data() {
      return {
        moneyval: '',
        task: {},
        types: '',
        disabled: false,
        isshow: false,
        userpassword: '',
      }
    },
    created() {
      if (this.$route.params.type) {
        this.types = this.$route.params.type
        this.task = this.$route.params.task
        if (this.types == 'BJ') {
          this.moneyval = this.task.task_bjmoney
          this.disabled = true
        }
      } else if (this.$route.query.code) {
        if (this.$route.query.code == 1) {
          this.$toast('授权成功！')
        } else if (this.$route.query.code == 2) {
          this.$toast('授权失败，请联系客服人员！')
        } else if (this.$route.query.code == 3) {
          this.$toast('不是同一个微信号授权！')
        }
      }
    },
    methods: {
      //全部提现
      onAll() {
        if (this.types == 'BJ') {
          this.moneyval = this.task.task_bjmoney
        } else {
          this.moneyval = this.task.task_yjmoney
        }
      },
      getNum() {
        var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
        var nums = ""
        for (var i = 0; i < 16; i++) {
          var id = parseInt(Math.random() * 61);
          nums += chars[id];
        }
        return nums
      },
      //授权
      onAuth() {
        let str = this.getNum()
        let params = {
          authorized: aestool.encrypt('pay_begin', str),
          authorized_s: aestool.encrypt(str, '123456Authorized'),
        }
        authorizedaddress(params).then(res => {
          if (res.Status == 200) {
            let link = aestool.decrypt(res.Data, '123456Authorized') + sessionStorage.getItem('token')
            window.location.href = link
          }
        })
      },
      //提现
      onSure() {
        if (this.moneyval == '') {
          this.$toast('请输入提现金额')
        } else {
          this.userpassword = ''
          this.isshow = true
        }
      },
      //确认提现
      onConfirm() {
        if (this.userpassword == '') {
          this.$toast('请输入操作密码！')
        } else {
          console.log('userpassword', this.userpassword)
          if (this.types == 'BJ') {
            let params = {
              task_id: aestool.encrypt(this.task.id, '123456asdztaskid'),
              address: aestool.encrypt(sessionStorage.getItem('ip'), '123456asdztaskid'),
              pwd: aestool.encrypt(this.userpassword, '123456asdztaskid')
            }
            capitalwithdraw(params).then(res => {
              console.log('提现', res)
              if (res.Status == 200) {
                this.$toast(res.Data)
                setTimeout(this.$router.push('/taskmanage'), 1500)
              } else {
                this.$toast(res.Message)
              }
            })
          } else {
            let typeval
            this.types == 'YJ' ? typeval = 'y_money' : typeval = 'b_money'
            let params = {
              money: aestool.encrypt(this.moneyval, 'Businesspayment0'),
              address: aestool.encrypt(sessionStorage.getItem('ip'), 'Businesspayment0'),
              type: aestool.encrypt(typeval, 'Businesspayment0'),
              pwd: aestool.encrypt(this.userpassword, 'Businesspayment0')
            }

            businesspayment(params).then(res => {
              console.log('佣金提现', res)
              if (res.Status == 200) {
                this.$toast(res.Message)
                setTimeout(this.$router.push('/mine'), 1500)
              } else {
                this.$toast(res.Message)
              }
            })
          }
        }
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .withdrawal {
    .topbox {
      padding 20px 16px
      border-bottom 10px solid #f8f8f8
    }

    .withtop {
      background url(../assets/img/tx_1.jpg) no-repeat top center
      background-size cover
      overflow hidden
      border-radius 10px
      color #fff
      box-shadow 0px 1px 6px 0px #addbfa

      .way {
        display flex
        justify-content space-between
        align-items center
        line-height 50px
        margin 30px 50px 20px

        .first {
          font-size 18px
          font-weight 600
        }

        .second {
          font-size 14px
          color #abbcfe
        }
      }

      .money {
        font-size 30px
        font-weight 600
        margin 0 50px 40px
      }
    }

    .centerbox {
      padding 0 16px

      p {
        line-height 40px
        font-size 18px
      }

      .now {
        font-size 14px
        color #a6a6a6
      }

      .content {
        display flex
        justify-content space-between
        align-items center
        padding-bottom 15px
        border-bottom 1px solid #f2f2f2

        .textmoney {
          display flex
          align-items center
          width 73%
          border-right 2px solid #f2f2f2
        }

        .first {
          font-size 26px
        }

        input {
          border 0
          font-size 30px
          width 90%
        }
        input:

        :-webkit-input-placeholder {
          color #929292
          font-size 14px
        }

        .all {
          display block
          font-size 14px
          color #448cfb
        }
      }

      .btnlist {
        display flex
        justify-content space-around
      }

      .surebtn {
        line-height 50px
        text-align center
        font-size 16px
        color #fff
        background-image linear-gradient(to right, #45b5fe, #2358fd)
        border-radius 25px
        margin-top 30px
        width 40%
      }

      .another {
        background-image linear-gradient(to right, #f88a89, #e23634)
      }
    }
  }
</style>

